<template>
    <div class="productProNew">
        <div class="title"><h1><span>新建行程</span></h1></div>
        <form name="基本信息" class="basicInfor">
            <h1 class="hide">行程名称(必填)</h1>
            <div class="form-group required">
                <label :for="'strokeName'+$attrs.text">行程名称：</label>
                <input autocomplete="off" type="text" class="form-control proName w50" :id="'strokeName'+$attrs.text" placeholder="" required v-model="journey.title" >
            </div>
            <h1 class="hide">导游电话(必填)</h1>
            <div class="form-group wu required">
                <label :for="'phone'+$attrs.text">导游电话：</label>
                <input autocomplete="off" type="text" class="form-control proName" :id="'phone'+$attrs.text" placeholder="" required v-model="journey.managePhone">（管理员电话必须是已注册的号码）
            </div>
            <h1 class="hide">出发地（必填）</h1>
            <div class="form-group departure required">
                <label>出发地：</label>
                <Site v-on:DeparTure="deparTure"></Site>
            </div>
            <h1 class="hide">目的地（必填）</h1>
            <div class="form-group destination required">
                <label>目的地：</label>
                <Site v-on:DeparTure="desTination"></Site>
            </div>
            <h1 class="hide">出发日期（必填）</h1>
            <div class="form-group required">
                <label :for="'schduleDateStart'+$attrs.text">出发日期：</label>
                <input autocomplete="off" class="form-control ipt-datepicker adultPrice setoff" type="text" :id="'schduleDateStart'+$attrs.text" placeholder="起始时间" required v-model="setoffDate">
            </div>
            <h1 class="hide">游玩天数（必填）</h1>
            <div class="form-group required">
                <label :for="'strokeDay'+$attrs.text">游玩天数：</label>
                <input autocomplete="off" type="text" class="form-control adultPrice" :id="'strokeDay'+$attrs.text" placeholder="" required v-model="journey.coDay">
            </div>
            <!--<h1 class="hide">预算金额</h1>
            <div class="form-group ">
                <label :for="'budget'+$attrs.text">预算金额：</label>
                <input autocomplete="off" type="text" class="form-control adultPrice" :id="'budget'+$attrs.text" placeholder="" v-model="journey.yusuan">
            </div>-->
            <h1 class="hide">往返航班(必填)</h1>
            <div class="form-group ">
                <label class="destxt" :for="'roundFlights'+$attrs.text">往返航班：</label>
                <textarea class="form-control proDes" :id="'roundFlights'+$attrs.text" rows="6" placeholder="请输入内容" v-model="journey.transportInfo"></textarea>
            </div>
            <h1 class="hide">集合安排(必填)</h1>
            <div class="form-group ">
                <label class="destxt" :for="'setPlan'+$attrs.text">集合安排：</label>
                <textarea class="form-control proDes" :id="'setPlan'+$attrs.text" rows="6" placeholder="请输入内容" v-model="journey.jiheInfo"></textarea>
            </div>
            <h1 class="hide">导游领队(必填)</h1>
            <div class="form-group ">
                <label class="destxt" :for="'tourLeader'+$attrs.text">导游领队：</label>
                <textarea class="form-control proDes" :id="'tourLeader'+$attrs.text" rows="6" placeholder="请输入内容" v-model="journey.talentInfo"></textarea>
            </div>
            <h1 class="hide">紧急电话(必填)</h1>
            <div class="form-group ">
                <label :for="'call'+$attrs.text">紧急电话：</label>
                <input autocomplete="off" type="text" class="form-control proName" :id="'call'+$attrs.text" placeholder=""  v-model="journey.jinjiPhone">
            </div>
            <h1 class="hide">补充说明(必填)</h1>
            <div class="form-group ">
                <label class="destxt" :for="'addDes'+$attrs.text">补充说明：</label>
                <textarea class="form-control proDes" :id="'addDes'+$attrs.text" rows="6" placeholder="请输入内容" v-model="journey.remark"></textarea>
            </div>
            <button type="button" class="btn btn-info confirmBtn" @click="submitPro()">确定</button>
        </form>
    </div>
</template>
<script>
    import Site from '@/components/public/site'
    export default{
        data(){
            return{
                Http:'',// 接口
                setoffDate:'',//出发日期
                journey:{//
                    title:'',//标题
                    managePhone:'', //管理员电话
                    startCity:'',//出发城市
                    startPath:'',//出发城市路径
                    destiCity:'',//目标城市
                    destiPath:'',//目标城市路径
                    startDate:'',//出发日期
                    coDay:'',//天数
                    yusuan:0,//预算金额
                    transportInfo:'',//往返航班
                    jiheInfo:'',//集合安排
                    talentInfo:'',//导游领队
                    jinjiPhone:'',//紧急电话
                    remark:'',//补充说明
                }
            }
        },
        computed:{
            XchBaseAdd(){
                return this.$store.state.interface.wbXchBaseAdd;
            }
        },
        components:{
            Site
        },
        methods:{
            colorChange(event){
                event.target.style.color = '#7f889c';
            },
            // 出发
            deparTure: function(msg,path){
                this.journey.startCity=msg;
                this.journey.startPath=path;
            },
            // 目标
            desTination: function(msg,path){
                this.journey.destiCity=msg;
                this.journey.destiPath=path;
            },
            ContactPhone(item,event){ //判断手机正确格式
                let pattern = /^1[35789]\\d{9}$/;
                if(item.replace(/(^s*)|(s*$)/g, "") == 0){
                    event.target.value='';
                    return;
                }else if(!pattern.test(item)){
                    layer.msg('请填写正确的手机号');
                }
            },
            submitPro(){
              let self = this;
              let isMobile = /^(13|14|15|17|18)\d{9}$/;
              if (self.journey.title === '') {
                layer.msg('请填写行程名称');
                return false
              }
              if (self.journey.managePhone === '') {
                layer.msg('请填写导游电话');
                return false
              }
              if (!isMobile.test(self.journey.managePhone)) {
                layer.msg('请填写11位有效手机号');
                return false
              }
              if (self.journey.startCity === '') {
                layer.msg('请选择出发地');
                return false
              }
              if (self.journey.destiCity === '') {
                layer.msg('请选择目的地');
                return false
              }
              if (self.setoffDate === '') {
                layer.msg('请选择出发日期');
                return false
              }
              if (self.journey.coDay === '') {
                layer.msg('请填写游玩天数');
                return false
              }
              let formData = new FormData();
              formData.append('title', self.journey.title);
              formData.append('managePhone', self.journey.managePhone);
              formData.append('startCity', self.journey.startCity);
              formData.append('startPath', self.journey.startPath);
              formData.append('destiCity', self.journey.destiCity);
              formData.append('destiPath', self.journey.destiPath);
              formData.append('startDate', self.journey.startDate);
              formData.append('coDay', self.journey.coDay);
              formData.append('yusuan', self.journey.yusuan);
              formData.append('transportInfo', self.journey.transportInfo);
              formData.append('jiheInfo', self.journey.jiheInfo);
              formData.append('talentInfo', self.journey.talentInfo);
              formData.append('jinjiPhone', self.journey.jinjiPhone);
              formData.append('remark', self.journey.remark);
              self.$ajax.post(self.Http,formData).then(function(res) {
                if(res.data.code === '10000' ){
                  layer.msg('新建成功！');
                  self.journey = {};
                  // 跳转的日程安排
                  // self.$store.commit('NEW_STROKE_TAB',{
                  //   title:'日程安排',
                  //   components:'strokeProSchedule',
                  //   dataId:id,// ID
                  // });
                  // return;
                }else if(res.data.code === '14013' ){
                  layer.msg('新建失败,管理员电话为未注册号码!');
                }else{
                  layer.msg('新建失败!');
                }
              },function(res) {
                layer.msg('服务器错误!');
              });
            }
        },
        beforeMount(){
            let url = this.XchBaseAdd;
            let sessionId = JSON.parse(sessionStorage.getItem('customer')).sid;
            this.Http = `${url}?sid=${sessionId}`; // 基础信息
        },
        mounted(){
            let self = this;
            // 出发日期
            $("#schduleDateStart"+self.$attrs.text).datepicker({
                    showAnim: 'fadeIn',
                    minDate: '-1y',
                    maxDate: "+1y",
                    defaultDate : +1,
                    duration : 'fast',
                    firstDay : 1 ,
                    nextText : '下一月',
                    prevText : '上一月',
                    showButtonPanel: true,
                    currentText : '今天',
                    gotoCurrent : false,
                    onSelect: function (dateText, inst) {
                        // self.start = Number(dateText.split('-').join(''));//将字符串转换为number
                        self.setoffDate = dateText;
                        self.journey.startDate= Date.UTC(inst.currentYear, inst.currentMonth, inst.currentDay);
                    },

            });
        }
    }
</script>
<style lang="scss" scoped>
    .basicInfor{
        form{
            display:block;
          .proDes{width: 50%}
        }
        .title{
            color:#4e5e7e;
        }
        select option{
            color:#7f889c;
        }
        .form-control.proDes{width:50%;}
    }

</style>
